<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户管理</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>
    <body>
        <div id='app'>
            <el-form label-width="auto">
                <el-table border :data="userList" style="width: 100%;margin-bottom: 20px;" row-key="id" @cell-dblclick='handleCellDblClick'>
                    <el-table-column label="#" prop="id" width='40px'>
                    </el-table-column>
                    <el-table-column label="登录代码" prop="code">
                        <template slot-scope="scope">
                            <el-input v-model.trim="scope.row.code" placeholder="登录代码(建议手机号码)" v-if="editing === 'code-'+scope.row.id"
                                :ref="'code-'+scope.row.id" @blur="handleInputBlur('code-'+scope.row.id)"
                                @keyup.enter.native="handleInputBlur('code-'+scope.row.id)">
                            </el-input>
                            <span v-else>{{scope.row.code}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="登录密码" prop="inputedPwd">
                        <template slot-scope="scope">
                            <el-input type='password' v-model.trim="scope.row.inputedPwd" placeholder="登录密码" v-if="editing === 'inputedPwd-'+scope.row.id"
                                :ref="'inputedPwd-'+scope.row.id" @blur="handleInputBlur('inputedPwd-'+scope.row.id)"
                                @keyup.enter.native="handleInputBlur('inputedPwd-'+scope.row.id)">
                            </el-input>
                            <span v-else>********</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户名称" prop="name">
                        <template slot-scope="scope">
                            <el-input v-model.trim="scope.row.name" placeholder="用户名称" v-if="editing === 'name-'+scope.row.id"
                                :ref="'name-'+scope.row.id" @blur="handleInputBlur('name-'+scope.row.id)"
                                @keyup.enter.native="handleInputBlur('name-'+scope.row.id)">
                            </el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="隶属角色" prop="roleIds">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.roleIds" multiple placeholder="请选择">
                                <el-option v-for="item in config.roleList" :key="item.id" :label="item.code" :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>

                    <el-table-column label="禁用" prop="forbidden" min-width='20px'>
                        <template slot-scope="scope">
                            <el-checkbox v-model.trim="scope.row.forbidden">
                            </el-checkbox>
                        </template>
                    </el-table-column>
                    
                    <el-table-column title="操作">
                        <template slot="header">
                            <span>操作</span>
                            <el-button type="success" size='mini' @click="handleAppend">追加记录(+)
                            </el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button plain type="danger" size='mini' @click="handleDelete(scope.$index)">X</el-button>
                            <el-button type="primary" size='mini' @click="handleInsert(scope.$index)">干</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-form-item label="">
                    <el-button type="primary" @click='handleSave'>保存</el-button>
                </el-form-item>
            </el-form>
        </div>

        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            window.$util = $util;
            import * as $rest from '/lib/hc-rest-service.js'
            window.$rest = $rest;
            
            $rest.getdata('/admin/load',function(config){
                config.userList.forEach(it=>{it.inputedPwd='@been changed@'});
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        config:config,
                        userList:config.userList,
                        editing:'',
                        inputstatus:{},
                    },
                    methods: {
                        newItem:function(){
                            let item = {
                                id:++this.config.usermaxid,
                                code:'',
                                name:'',
                                roleIds:[],
                                };
                             this.editing ='code-' + item.id;
                             return item;
                        },
                        handleCellDblClick:function(row, column, cell, event)
                        {
                           let prop = column.property + '-' + row.id
                           this.editing = prop;
                           this.$nextTick(function(){
                               let input = this.$refs[prop]
                               if(input)input.focus();
                           })
                        },
                        handleInputBlur:function(prop)
                        {
                            this.editing = null;
                        },
                        handleAppend:function(){
                            this.userList.push(this.newItem())
                        },
                        handleInsert:function(index){
                            this.userList.splice(index,0,this.newItem())
                        },
                        handleDelete:function(index){
                            this.userList.splice(index,1)
                        },
                        handleSave:function(){
                            let self = this;
                            $rest.postdata('/admin/save',this.config,function(config)
                                {
                                     self.config = config;
                                     self.$message({
                                         type:'success',
                                         message:'保存成功'
                                     });
                                }
                            );
                        },
                      
                    },
                });
            })
            

            
        </script>
    </body>
</html>
